<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js组件起步</title>
    <!--引入Vue.js核心文件-->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <!--这是一个自定义的组件（标签）-->
    <my-img v-for="image in imgs" v-bind:myattr="image"/>
</div>

</body>
<!--编写业务脚本-->
<script>
    //告诉Vue.js，我要声明一个组件叫my-img
    Vue.component('my-img',{
       //指定一个属性叫myattr，用来做数据绑定
       //敲黑板，重点，貌似不支持myAttr这种写法
       props:['myattr'],
       //这里指定组件的内容，想添什么添什么
       template:'<img v-bind:src="myattr.imgSrc"/>'
    })

    //声明变量并创建Vue实例
    var app = new Vue({
        //指定挂载元素
        el: '#app',
        //数据对象
        data: {
            imgs:[
                {imgSrc: 'resource/001.png '},
                {imgSrc: 'resource/002.jpg '},
                {imgSrc: 'resource/003.jpg '}
            ]
        }
    })
</script>
</html>
